DOMの操作 – Dart逆引きリファレンス

DOMの操作（Manipulating DOM）

要素を新たに作成したい

「Element」クラスのリダイレクティングコンストラクタ「Element.tag」を利用して要素オブジェクトを生成します。
「Element」クラスは名前空間「dart:html」に用意されているので、使用する際はインポートを行います。

#import('dart:html');

ここではdiv要素を生成しています。

main() {
  Element element = new Element.tag('div');
}

内容を有する要素を新たに作成したい

「Element」クラスのリダイレクティングコンストラクタ「Element.html」を利用して要素オブジェクトを生成します。

#import('dart:html');

main() {
  Element element = new Element.html('<p>すばしっこい茶色の<em>狐</em>。</p>');
}

ある要素へ子要素を追加したい

親の「Element」オブジェクトが持つ「nodes」プロパティに子要素を追加します。「nodes」は「List」クラスのサブクラスである「NodeList」型なので、「add」メソッドを用いて要素を追加します。

#import('dart:html');

main() {
  Element element = new Element.html('<p>すばしっこい茶色の<em>狐</em>。</p>');
  document.query('body').nodes.add(element);
}

ある要素をそれを持つ親要素から削除したい

削除する「Element」オブジェクトの「remove」メソッドを呼び出します。

#import('dart:html');

main() {
  Element element = new Element.html('<p>すばしっこい茶色の<em>狐</em>。</p>');
  document.query('body').nodes.add(element);
  document.on.click.add((event) => element.remove());
}

クリックイベントをトリガとして要素が削除されるようになっています。